<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/11
  Time: 10:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".thumbs a").click(function () {
                var largePath = $(this).attr("href");
                var largeAlt = $(this).attr("title");
                $("#largeImg").attr({
                    src: largePath,
                    alt: largeAlt
                });
                return false;
            });

            $("#myfile").change(function(){
                $("#previewImg").attr("src","file:///" + $("#myfile").val());
            });
        });

        //使用js实现文件上传图片的预览
        /*function showPreview(obj){
            var str = obj.value;
            document.getElementById("previewImg").innerHTML =
                "<img src = '" + str + "' />";
        }*/
    </script>

</head>
<body>
<img id="previewImg" src="images/preview.jpg" width="80" height="80" />
<form >
    请选择图片：<input id="myfile" name="myfile" type="file" onchange="showPreview(this)"/>
</form>

<div id="large"></div>

<hr>
<h2>图片预览</h2>
<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large Image"/></p>
<p class="thumbs">
    <a href="images/img2-lg.jpg" title="Image2"><img src="images/img2-thumb.jpg"></a>
    <a href="images/img3-lg.jpg" title="Image3"><img src="images/img3-thumb.jpg"></a>
    <a href="images/img4-lg.jpg" title="Image4"><img src="images/img4-thumb.jpg"></a>
    <a href="images/img5-lg.jpg" title="Image5"><img src="images/img5-thumb.jpg"></a>
    <a href="images/img6-lg.jpg" title="Image6"><img src="images/img6-thumb.jpg"></a>
</p>

</body>
</html>
